<!--优惠券-->
<template>
  <div class="DiscountWallpaper">
    <head-nav></head-nav>
    <div class="zanwei-top"></div>
    <mt-navbar v-model="currentTab">
      <mt-tab-item v-for="(tab,index) in tabs" :id="index" :key="index">{{tab}}</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="currentTab">
      <mt-tab-container-item v-for="(tab,index) in tabs" :id="index" :key="index">
        <div class="discountTicket">
          <mt-loadmore
            :top-method="refresh"
            @top-status-change="handleTopChange"
            ref="loadDone"
            :bottom-method="loadMore"
            :bottomDistance="60"
            :bottom-all-loaded="allLoaded"
            @bottom-status-change="handleBottomChange"
          >
            <!--个人信息-->
            <!-- <div class="information">
              <p>会员: <span>{{userInfo.XF_SURNAME}}</span></p>
              <p>您当前会员等级: <span>V{{userInfo.XF_GRADE}}</span></p>
            </div>-->
            <!--顶部下拉视图-->
            <div slot="top" class="mint-loadmore-top">
              <i
                v-show="topStatus !== 'loading'"
                :class="{ 'is-rotate': topStatus === 'drop' }"
                class="iconfont icon-iconxlsx"
              ></i>
              <span v-show="topStatus !== 'loading'">{{'pull'===topStatus?'下拉可以刷新':'释放立即刷新'}}</span>
              <mt-spinner
                v-show="topStatus === 'loading'"
                type="triple-bounce"
                :size="40"
                color="#26a2ff"
              ></mt-spinner>
            </div>
            <!--卡券区域-->
            <ul class="cardList">
              <li
                v-for="(card,index) in cardList"
                :key="index"
                @click="exchangeFn(card.ID,card.LPMC,card.SFHX,card.SYSJ)"
              >
                <!--card.sfgq?'#888':-->
                <!--card.backgroundColor-->
                <div class="card" :style="{backgroundColor:card.background}" v-if="card.SFHX == 0">
                  <p class="dt_title">
                    <span class="tname">乐宾百货</span>
                  </p>
                  <div>
                    <span>{{card.MZ}}{{card.DW}}{{card.LPMC}}</span>
                  </div>
                  <div>
                    <span></span>
                    <span>{{card.SYSJ1}}</span>
                  </div>
                </div>
                <div class="card" :style="{backgroundColor: gray}" v-if="card.SFHX == 1">
                  <p class="dt_title" v-if="btnShow">
                    <span class="tname">乐宾百货</span>
                    <!--<span v-show="card.LPID && card.JE">
											<span v-if="card.ORDERSTATUS === null" class="tksq" @click.stop="goTk(card.ID)">退款申请</span>
											<span v-else-if="card.ORDERSTATUS === 1 || card.ORDERSTATUS === 2" class="tksq" @click.stop="lookJd(card.ORDERSTATUS,card.SHBZ)">退款进度</span>
											<span v-else class="tksq" @click.stop="lookJd(card.ORDERSTATUS,card.SHBZ)">退款进度</span>
                    </span>-->
                  </p>
                  <p class="dt_title" v-else>
                    <span class="tname">乐宾百货</span>
                  </p>
                  <div>
                    <span>{{card.LPMC}}</span>
                  </div>
                  <div>
                    <span></span>
                    <!--<span v-if="!card.sfgq">有效期{{card.YXQ}}</span>-->
                    <span>已兑换{{card.SYSJ1}}</span>
                  </div>
                </div>
              </li>
            </ul>
            <!--底部加载更多-->
            <div slot="bottom" class="mint-loadmore-bottom">
              <i
                v-show="bottomStatus !== 'loading'"
                :class="{ 'is-rotate': bottomStatus === 'drop' }"
                class="iconfont icon-iconxlsx"
              ></i>
              <span v-show="bottomStatus !== 'loading'">{{'pull'===bottomStatus?'上拉加载更多':'释放立即刷新'}}</span>
              <mt-spinner
                v-show="bottomStatus === 'loading'"
                type="triple-bounce"
                :size="40"
                color="#26a2ff"
              ></mt-spinner>
            </div>
          </mt-loadmore>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
    <!--<div class="zanwei-bottom"></div>-->
    <!-- 底部导航 -->
    <!--<foot-nav></foot-nav>-->
  </div>
</template>

<script>
import { MessageBox, Toast } from "mint-ui";
import api from "@/api/api";
import { mapActions } from "vuex";
import { debuglog } from "util";

export default {
  name: "DiscountTicket",
  data() {
    return {
      tabs: ["未使用", "已使用"],
      currentTab: 0,
      topStatus: "",
      bottomStatus: "",
      allLoaded: false,
      userInfo: {},
      cardList: [],
      row: 10,
      num: 1,
      gray: "#999",
      tk_status: 0,
      btnShow: false,
      pageType: 0,
      hykid: ""
    };
  },
  watch: {
    currentTab: function(newVal, oldVal) {
      this.allLoaded = false;
      this.num = 1;
      this.getUserOrderList(false, newVal);
    }
  },
  methods: {
    exchangeFn(lpid, ll, sfhx, sysj) {
      if (sfhx == 0) {
        let pageType = this.pageType;
        if (pageType == "1") {
          if (sysj != new Date().pattern("yyyy-MM")) {
            MessageBox("提示", "当前券不在使用期限内，请在有效期内使用");
            return;
          }
        }
        if (pageType == "2") {
          if (sysj != new Date().pattern("yyyy-MM")) {
            MessageBox("提示", "当前券不在使用期限内，请在有效期内使用");
            return;
          }
        }
        if (pageType == "3") {
          if (sysj != new Date().pattern("yyyy-MM-dd")) {
            MessageBox("提示", "当前券不在使用期限内，请在有效期内使用");
            return;
          }
        }
        this.$router.push("/SuperVipScoreCreate/" + lpid);
      }
    },

    /**
     * 下拉状态监听
     * @param status 当前状态
     */
    handleTopChange(status) {
      this.topStatus = status;
    },
    /**
     * 上拉状态监听
     * @param status 当前状态
     */
    handleBottomChange(status) {
      this.bottomStatus = status;
    },
    /**
     * 刷新页面
     */
    refresh() {
      let that = this;
      let currentTab = that.currentTab;
      that.num = 1;
      that.getUserOrderList(false, currentTab);
    },
    /**
     * 加载更多
     */
    loadMore() {
      let that = this;
      let currentTab = that.currentTab;
      this.num++;
      that.getUserOrderList(true, currentTab);
    },
    /**
     * 获取页面数据
     */
    getUserOrderList(isLoadMore, currentTab) {
      let that = this;
      let row = this.row;
      let num = this.num;
      let lx = this.pageType;
      let sfhx = this.currentTab;
      let vipcode = JSON.parse(sessionStorage.getItem("userinfo")).vipcode;

      function yxqx(nian, yue) {
        var lastDay = new Date(nian, yue, 0);
        var year = lastDay.getFullYear();
        var month = lastDay.getMonth() + 1;
        month = month < 10 ? "0" + month : month;
        var day = lastDay.getDate();
        day = day < 10 ? "0" + day : day;
        return year + "-" + month + "-" + day;
      }
      api.getCjhyYhqList(that, vipcode, that.hykid, lx, row, num, sfhx, res => {
        console.log(res, "优惠券===");
        let data = res.data;
        if (data.code === 0) {
          data = data.data;
          let list = data.list;
          for (let i = 0; i < list.length; i++) {
            switch (i % 3) {
              case 0:
                list[i].background = "#e30011";
                break;
              case 1:
                list[i].background = "#f8931f";
                break;
              case 2:
                list[i].background = "#eb6e93";
                break;
            }
            if (list[i].YHQTYPE == "1") {
              list[i].LPMC = "购物券";
              //使用时间
              var sysj = list[i].SYSJ;
              list[i].SYSJ1 =
                new Date(sysj + "-01").pattern("yyyy年MM月dd日") +
                "~" +
                new Date(yxqx(sysj.split("-")[0], sysj.split("-")[1])).pattern(
                  "yyyy年MM月dd日"
                );
            } else if (list[i].YHQTYPE == "2") {
              list[i].LPMC = "生日券";
              var sysj = list[i].SYSJ;
              list[i].SYSJ1 =
                new Date(sysj + "-01").pattern("yyyy年MM月dd日") +
                "~" +
                new Date(yxqx(sysj.split("-")[0], sysj.split("-")[1])).pattern(
                  "yyyy年MM月dd日"
                );
            } else if (list[i].YHQTYPE == "3") {
              list[i].LPMC = "停车券";
              var sysj = list[i].SYSJ;
              list[i].SYSJ1 = new Date(sysj).pattern("yyyy年MM月dd日");
            }
          }
          if (isLoadMore) {
            that.cardList = that.cardList.concat(list);
            that.$refs.loadDone[currentTab].onBottomLoaded();
          } else {
            that.allLoaded = false;
            that.cardList = list;
            console.log("---------------");
            console.log(list);
            //            that.cardList = [1,2,1,1];
            that.$refs.loadDone[currentTab].onTopLoaded();
          }
          if (list.length === 0) {
            that.allLoaded = true;
            Toast("没有更多了");
          }
        } else {
          MessageBox("提示", data.msg);
        }
      });
    }
  },
  created() {},
  mounted() {
    let that = this;
    let params = this.$route.params;
    let title;
    let pageType = params.yhqtype;
    that.hykid = params.hykid;
    switch (pageType) {
      case "1":
        title = "购物券";
        break;
      case "2":
        title = "生日券";
        break;
      case "3":
        title = "停车券";
        break;
    }
    this.pageType = pageType;
    this.$store.commit("TITLE", title);
    this.getUserOrderList(false, this.currentTab);
  }
};
Date.prototype.pattern = function(fmt) {
  var o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
    "H+": this.getHours(), //小时
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds() //毫秒
  };
  var week = {
    "0": "/u65e5",
    "1": "/u4e00",
    "2": "/u4e8c",
    "3": "/u4e09",
    "4": "/u56db",
    "5": "/u4e94",
    "6": "/u516d"
  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  }
  if (/(E+)/.test(fmt)) {
    fmt = fmt.replace(
      RegExp.$1,
      (RegExp.$1.length > 1
        ? RegExp.$1.length > 2
          ? "/u661f/u671f"
          : "/u5468"
        : "") + week[this.getDay() + ""]
    );
  }
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(fmt)) {
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
    }
  }
  return fmt;
};
</script>

<style scoped lang="less">
li {
  list-style: none;
}

.DiscountWallpaper {
  padding-bottom: 0.2rem;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  .mint-tab-container {
    margin-top: 0.06rem;
    flex: 1;
  }
  .mint-msgbox-message {
    font-size: 0.32rem;
  }
  .mint-msgbox-wrapper .mint-msgbox-btns .tkjd_btn {
    font-size: 0.34rem !important;
  }
  .mint-msgbox-wrapper .mint-msgbox-btns .mint-msgbox-confirm {
    font-size: 0.34rem !important;
  }
  .mint-msgbox-wrapper .mint-msgbox-input input {
    font-size: 0.3rem !important;
    height: 0.5rem !important;
  }
}

.mint-loadmore-bottom {
  i {
    display: inline-block;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
    vertical-align: middle;
    font-size: 25pt;
    color: #888;
    font-weight: bold;
    transform: rotate(180deg);
  }
  i.is-rotate {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}

.mint-loadmore-top {
  height: auto;
  i {
    display: inline-block;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
    vertical-align: middle;
    font-size: 25pt;
    color: #888;
    font-weight: bold;
  }
  i.is-rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .mint-spinner-double-bounce {
    margin: 0 auto;
  }
}

.discountTicket {
  /*padding: 0 .4rem;*/
  /*height: 100%;*/
  max-height: 85vh;
  overflow: scroll;
  .information {
    margin: 0.2rem 0.4rem;
    background: #f05dc4;
    display: flex;
    justify-content: space-between;
    padding: 0.1rem 0.4rem;
  }
  .cardList {
    margin-top: 0.3rem;
    padding: 0 0.4rem;
    min-height: 75vh;
    .card {
      margin-bottom: 0.3rem;
      transition: background 500ms;
      padding: 0.3rem;
      p {
        color: #fff;
        font-size: 14pt;
        border-bottom: 1px solid #fff;
        line-height: 0.6rem;
      }
      div {
        display: flex;
        align-items: center;
        /*margin-top: .1rem;*/
        justify-content: space-between;
        flex-wrap: wrap;
        color: #fff;
        span:nth-child(1) {
          font-weight: bold;
          font-size: 16pt;
          line-height: 0.7rem;
          flex-shrink: 1;
        }
        span:nth-child(2) {
          text-align: right;
          flex: auto;
        }
      }
      .dt_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 0.6rem;
        .tksq {
          display: block;
          font-size: 0.28rem;
          height: 0.44rem;
          width: 1.42rem;
          border-radius: 0.08rem;
          border: 1px solid #ffffff;
          line-height: 0.44rem;
          text-align: center;
        }
      }
    }
  }
}
</style>
